<template>
    <div>
        <el-tabs
            type="card"
            class="terminal-tabs card-interval"
            style="background-color: var(--panel-terminal-tag-bg-color)"
            v-model="terminalValue"
            :before-leave="beforeLeave"
            @tab-change="quickCmd = ''"
            @edit="handleTabsRemove"
        >
            <el-tab-pane
                :key="item.index"
                v-for="item in terminalTabs"
                :closable="true"
                :label="item.title"
                :name="item.index"
            >
                <template #label>
                    <span class="custom-tabs-label">
                        <span
                            v-if="item.status === 'online'"
                            :style="`color: ${
                                item.latency < 100 ? '#69db7c' : item.latency < 300 ? '#f59f00' : '#d9480f'
                            }; display: inline-flex; align-items: center`"
                        >
                            <span>&nbsp;{{ item.latency }}&nbsp;ms&nbsp;</span>
                            <el-icon>
                                <circleCheck />
                            </el-icon>
                        </span>
                        <el-button
                            v-if="item.status === 'closed'"
                            icon="Refresh"
                            class="text-white"
                            size="default"
                            link
                            @click="onReconnect(item)"
                        />
                        <span v-if="item.title.length <= 20">&nbsp;{{ item.title }}&nbsp;</span>
                        <el-tooltip v-else :content="item.title" placement="top-start">
                            <span>&nbsp;{{ item.title.substring(0, 17) }}...&nbsp;</span>
                        </el-tooltip>
                    </span>
                </template>
                <Terminal
                    :style="{
                        height: cmdPanelVisible
                            ? `calc(100vh - ${loadHeightWithPanel()})`
                            : `calc(100vh - ${loadHeight()})`,
                        'background-color': `var(--panel-logs-bg-color)`,
                    }"
                    :ref="'t-' + item.index"
                    :key="item.Refresh"
                ></Terminal>

                <transition name="el-fade-in">
                    <div
                        v-show="cmdPanelVisible"
                        class="mb-2 border-b border-[var(--el-border-color)] pb-2 w-full bg-[var(--el-bg-color)]"
                    >
                        <el-tabs v-model="activeGroupTab" type="card" class="command-tabs">
                            <el-tab-pane
                                v-for="group in commandTree"
                                :key="group.value"
                                :label="''"
                                :name="group.value"
                            >
                                <template #label>
                                    <span class="group-tab-label">
                                        <span v-if="group.label.length <= 6">{{ group.label }}</span>
                                        <el-tooltip v-else :content="group.label" placement="top">
                                            <span>{{ group.label.substring(0, 6) }}...</span>
                                        </el-tooltip>
                                    </span>
                                </template>
                                <div class="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-2 p-0">
                                    <el-tag
                                        v-for="cmd in group.children"
                                        :key="cmd.value"
                                        class="command-tag"
                                        @click="executeCommand(cmd.value)"
                                        type="info"
                                        effect="plain"
                                    >
                                        <div class="flex items-center justify-between w-full gap-1.5">
                                            <span class="command-tag-name" :title="cmd.label">
                                                {{
                                                    cmd.label.length > 8 ? cmd.label.substring(0, 8) + '...' : cmd.label
                                                }}
                                            </span>
                                            <el-popover placement="top" :width="320" trigger="hover">
                                                <template #reference>
                                                    <el-icon class="command-preview-icon">
                                                        <InfoFilled />
                                                    </el-icon>
                                                </template>
                                                <div class="command-preview">
                                                    <div class="command-preview-name">
                                                        <strong>{{ cmd.label }}</strong>
                                                    </div>
                                                    <div class="command-preview-value">{{ cmd.value }}</div>
                                                </div>
                                            </el-popover>
                                        </div>
                                    </el-tag>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </transition>

                <div class="flex items-center gap-3 w-full py-2 flex-wrap">
                    <el-button
                        @click="cmdPanelVisible = !cmdPanelVisible"
                        type="primary"
                        class="min-w-[120px] max-w-[150px] shrink-0"
                    >
                        {{ $t('terminal.quickCommand') }}
                        <el-icon class="ml-1">
                            <component :is="cmdPanelVisible ? 'ArrowUp' : 'ArrowDown'" />
                        </el-icon>
                    </el-button>
                    <el-input
                        v-model="batchVal"
                        @keydown.enter.exact.prevent="batchInput"
                        type="textarea"
                        :autosize="{ minRows: 1, maxRows: 3 }"
                        class="flex-1 basis-[300px] min-w-[200px]"
                        placeholder=">"
                    ></el-input>
                    <el-checkbox
                        :label="$t('terminal.batchInput')"
                        v-model="isBatch"
                        class="shrink-0 whitespace-nowrap"
                    />
                </div>
            </el-tab-pane>
            <el-tab-pane :closable="false" name="newTabs">
                <template #label>
                    <el-button v-popover="popoverRef" class="tagButton" icon="Plus"></el-button>
                    <el-popover
                        ref="popoverRef"
                        width="320px"
                        trigger="hover"
                        virtual-triggering
                        persistent
                        :offset="-4"
                    >
                        <div class="p-2 space-y-2">
                            <div class="flex gap-2">
                                <button
                                    @click="onNewSsh"
                                    class="flex-1 flex flex-col items-center justify-center px-3 py-2.5 bg-[var(--el-fill-color-light)] hover:bg-[var(--panel-main-bg-color-9)] rounded transition-colors duration-200 cursor-pointer group border-0 outline-none"
                                >
                                    <el-icon
                                        class="text-xl mb-1 text-[var(--el-text-color-primary)] group-hover:text-[var(--el-color-primary)] transition-colors"
                                    >
                                        <Plus />
                                    </el-icon>
                                    <span
                                        class="text-xs text-[var(--el-text-color-primary)] group-hover:text-[var(--el-color-primary)] font-medium truncate w-full text-center transition-colors"
                                    >
                                        {{ $t('terminal.createConn') }}
                                    </span>
                                </button>
                                <button
                                    @click="onNewLocal"
                                    class="flex-1 flex flex-col items-center justify-center px-3 py-2.5 bg-[var(--el-fill-color-light)] hover:bg-[var(--panel-main-bg-color-9)] rounded transition-colors duration-200 cursor-pointer group border-0 outline-none"
                                >
                                    <el-icon
                                        class="text-xl mb-1 text-[var(--el-text-color-primary)] group-hover:text-[var(--el-color-primary)] transition-colors"
                                    >
                                        <House />
                                    </el-icon>
                                    <span
                                        class="text-xs text-[var(--el-text-color-primary)] group-hover:text-[var(--el-color-primary)] font-medium truncate w-full text-center transition-colors"
                                    >
                                        {{ $t('terminal.localhost') }}
                                    </span>
                                </button>
                            </div>

                            <el-divider class="my-0" />

                            <div class="search-container px-1 py-1 bg-[var(--el-fill-color-light)] rounded">
                                <el-input
                                    v-model="hostFilterInfo"
                                    class="w-full"
                                    clearable
                                    suffix-icon="Search"
                                    :placeholder="$t('commons.button.search')"
                                    size="small"
                                >
                                    <template #prefix>
                                        <el-icon class="el-input__icon"><Search /></el-icon>
                                    </template>
                                </el-input>
                            </div>
                            <el-tree
                                ref="treeRef"
                                :expand-on-click-node="false"
                                node-key="id"
                                :default-expand-all="true"
                                :data="hostTree"
                                :props="defaultProps"
                                :filter-node-method="filterHost"
                                :empty-text="$t('terminal.noHost')"
                                class="host-tree compact"
                                :style="{ 'max-height': '200px' }"
                            >
                                <template #default="{ node, data }">
                                    <span class="custom-tree-node w-full">
                                        <span
                                            v-if="node.label === 'Default'"
                                            class="text-xs font-medium text-[var(--el-text-color-primary)]"
                                        >
                                            {{ $t('commons.table.default') }}
                                        </span>
                                        <div v-else class="w-full min-w-0">
                                            <span v-if="node.label.length <= 22">
                                                <a
                                                    @click="onClickConn(node, data)"
                                                    class="text-xs text-[var(--el-text-color-primary)] hover:text-[var(--el-color-primary)] transition-colors cursor-pointer block truncate"
                                                >
                                                    {{ node.label }}
                                                </a>
                                            </span>
                                            <el-tooltip v-else :content="node.label" placement="right">
                                                <span>
                                                    <a
                                                        @click="onClickConn(node, data)"
                                                        class="text-xs text-[var(--el-text-color-primary)] hover:text-[var(--el-color-primary)] transition-colors cursor-pointer block truncate"
                                                    >
                                                        {{ node.label.substring(0, 30) }}...
                                                    </a>
                                                </span>
                                            </el-tooltip>
                                        </div>
                                    </span>
                                </template>
                            </el-tree>
                        </div>
                    </el-popover>
                </template>
            </el-tab-pane>
            <div v-if="terminalTabs.length === 0">
                <el-empty
                    :style="{ height: `calc(100vh - ${loadEmptyHeight()})`, 'background-color': '#000' }"
                    :description="$t('terminal.emptyTerminal')"
                ></el-empty>
            </div>
        </el-tabs>
        <el-tooltip :content="loadTooltip()" placement="top">
            <el-button
                @click="toggleFullscreen"
                v-if="!mobile"
                class="bg-transparent border-0 absolute right-[50px] font-semibold text-sm"
                :style="{ top: loadFullScreenHeight() }"
                icon="FullScreen"
            ></el-button>
        </el-tooltip>

        <HostDialog
            ref="dialogRef"
            @on-conn-terminal="onConnTerminal"
            @on-new-local="onNewLocal"
            @load-host-tree="loadHostTree"
        />
    </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, watch, nextTick, computed, onMounted } from 'vue';
import Terminal from '@/components/terminal/index.vue';
import HostDialog from '@/views/terminal/terminal/host-create.vue';
import type Node from 'element-plus/es/components/tree/src/model/node';
import { ElTree } from 'element-plus';
import screenfull from 'screenfull';
import i18n from '@/lang';
import { Host } from '@/api/interface/host';
import { getHostTree, testByID, testLocalConn } from '@/api/modules/terminal';
import { GlobalStore } from '@/store';
import router from '@/routers';
import { getCommandTree } from '@/api/modules/command';
import { getAgentSettingByKey } from '@/api/modules/setting';

const dialogRef = ref();
const ctx = getCurrentInstance() as any;
const globalStore = GlobalStore();
const mobile = computed(() => {
    return globalStore.isMobile();
});

const toggleFullscreen = () => {
    if (screenfull.isEnabled) {
        screenfull.toggle();
    }
};
const loadTooltip = () => {
    return i18n.global.t('commons.button.' + (globalStore.isFullScreen ? 'quitFullscreen' : 'fullscreen'));
};

let timer: ReturnType<typeof setInterval> | null = null;
const terminalValue = ref();
const terminalTabs = ref([]) as any;
let tabIndex = 0;

const commandTree = ref();
const cmdPanelVisible = ref(false);
const activeGroupTab = ref('');
let quickCmd = ref();
let batchVal = ref();
let isBatch = ref<boolean>(false);

const popoverRef = ref();

const hostFilterInfo = ref('');
const hostTree = ref<Array<Host.HostTree>>();
const treeRef = ref<InstanceType<typeof ElTree>>();
const defaultProps = {
    label: 'label',
    children: 'children',
};
interface Tree {
    id: number;
    label: string;
    children?: Tree[];
}
const initCmd = ref('');

const acceptParams = async () => {
    globalStore.isFullScreen = false;
    loadCommandTree();
    loadHostTree();
    if (terminalTabs.value.length === 0) {
        await getAgentSettingByKey('LocalSSHConnShow').then((res) => {
            if (res.data === 'Enable') {
                onNewLocal();
            }
        });
    }
    timer = setInterval(() => {
        syncTerminal();
    }, 1000 * 5);
    if (!mobile.value) {
        screenfull.on('change', () => {
            globalStore.isFullScreen = screenfull.isFullscreen;
        });
    }
};

const cleanTimer = () => {
    clearInterval(Number(timer));
    timer = null;
    for (const terminal of terminalTabs.value) {
        if (ctx && ctx.refs[`t-${terminal.index}`][0]) {
            terminal.status = ctx.refs[`t-${terminal.index}`][0].onClose();
        }
    }
};

const loadHeight = () => {
    return globalStore.openMenuTabs ? '230px' : '190px';
};
const loadHeightWithPanel = () => {
    return globalStore.openMenuTabs ? '470px' : '430px';
};
const loadEmptyHeight = () => {
    return globalStore.openMenuTabs ? '201px' : '156px';
};
const loadFullScreenHeight = () => {
    return globalStore.openMenuTabs ? '105px' : '60px';
};

const handleTabsRemove = (targetName: string, action: 'remove' | 'add') => {
    if (action !== 'remove') {
        return;
    }
    if (ctx) {
        ctx.refs[`t-${targetName}`] && ctx.refs[`t-${targetName}`][0].onClose();
    }
    const tabs = terminalTabs.value;
    let activeName = terminalValue.value;
    if (activeName === targetName) {
        tabs.forEach((tab: any, index: any) => {
            if (tab.index === targetName) {
                const nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                    activeName = nextTab.index;
                }
            }
        });
    }
    terminalValue.value = activeName;
    terminalTabs.value = tabs.filter((tab: any) => tab.index !== targetName);
};

const loadHostTree = async () => {
    const res = await getHostTree({});
    hostTree.value = res.data;
};
watch(hostFilterInfo, (val: any) => {
    treeRef.value!.filter(val);
});
const filterHost = (value: string, data: any) => {
    if (!value) return true;
    return data.label.includes(value);
};
const loadCommandTree = async () => {
    const res = await getCommandTree('command');
    commandTree.value = res.data || [];
    for (const item of commandTree.value) {
        if (item.label === 'Default') {
            item.label = i18n.global.t('commons.table.default');
        }
    }
    if (commandTree.value.length > 0) {
        activeGroupTab.value = commandTree.value[0].value;
    }
};

const executeCommand = (command: string) => {
    if (!ctx) {
        return;
    }
    if (isBatch.value) {
        for (const tab of terminalTabs.value) {
            ctx.refs[`t-${tab.index}`] && ctx.refs[`t-${tab.index}`][0].sendMsg(command + '\n');
        }
    } else {
        ctx.refs[`t-${terminalValue.value}`] && ctx.refs[`t-${terminalValue.value}`][0].sendMsg(command + '\n');
    }
};

function batchInput() {
    if (batchVal.value === '' || !ctx) {
        return;
    }
    if (isBatch.value) {
        for (const tab of terminalTabs.value) {
            ctx.refs[`t-${tab.index}`] && ctx.refs[`t-${tab.index}`][0].sendMsg(batchVal.value + '\n');
        }
        batchVal.value = '';
        return;
    }
    ctx.refs[`t-${terminalValue.value}`] && ctx.refs[`t-${terminalValue.value}`][0].sendMsg(batchVal.value + '\n');
    batchVal.value = '';
}

function beforeLeave(activeName: string) {
    if (activeName === 'newTabs') {
        return false;
    }
}

const onNewSsh = () => {
    dialogRef.value!.acceptParams({ isLocal: false });
};
const onNewLocal = async () => {
    const res = await testLocalConn();
    if (!res.data) {
        dialogRef.value!.acceptParams({ isLocal: true });
        return;
    }
    terminalTabs.value.push({
        index: tabIndex,
        title: i18n.global.t('terminal.localhost'),
        wsID: 0,
        status: 'online',
        latency: 0,
    });
    terminalValue.value = tabIndex;
    nextTick(() => {
        ctx.refs[`t-${terminalValue.value}`] &&
            ctx.refs[`t-${terminalValue.value}`][0].acceptParams({
                endpoint: '/api/v2/hosts/terminal',
                initCmd: initCmd.value,
                error: '',
            });
        initCmd.value = '';
    });
    tabIndex++;
};

const onClickConn = (node: Node, data: Tree) => {
    if (node.level === 1) {
        return;
    }
    onConnTerminal(node.label, data.id);
};

const onReconnect = async (item: any) => {
    if (ctx) {
        ctx.refs[`t-${item.index}`] && ctx.refs[`t-${item.index}`][0].onClose();
    }
    item.Refresh = !item.Refresh;
    if (item.wsID === 0) {
        const res = await testLocalConn();
        nextTick(() => {
            ctx.refs[`t-${item.index}`] &&
                ctx.refs[`t-${item.index}`][0].acceptParams({
                    endpoint: '/api/v2/hosts/terminal',
                    initCmd: initCmd.value,
                    error: res.data ? '' : 'Failed to set up the connection. Please check the host information',
                });
            initCmd.value = '';
        });
        syncTerminal();
        return;
    }

    const res = await testByID(item.wsID);
    nextTick(() => {
        ctx.refs[`t-${item.index}`] &&
            ctx.refs[`t-${item.index}`][0].acceptParams({
                endpoint: '/api/v2/core/hosts/terminal',
                args: `id=${item.wsID}`,
                initCmd: initCmd.value,
                error: res.data ? '' : 'Failed to set up the connection. Please check the host information',
            });
        initCmd.value = '';
    });
    syncTerminal();
};

const onConnTerminal = async (title: string, wsID: number) => {
    const res = await testByID(wsID);
    terminalTabs.value.push({
        index: tabIndex,
        title: title,
        wsID: wsID,
        status: res.data ? 'online' : 'closed',
        latency: 0,
    });
    terminalValue.value = tabIndex;
    nextTick(() => {
        ctx.refs[`t-${terminalValue.value}`] &&
            ctx.refs[`t-${terminalValue.value}`][0].acceptParams({
                endpoint: '/api/v2/core/hosts/terminal',
                args: `id=${wsID}`,
                initCmd: initCmd.value,
                error: res.data ? '' : 'Authentication failed. Please check the host information!',
            });
        initCmd.value = '';
    });
    tabIndex++;
};

function syncTerminal() {
    for (const terminal of terminalTabs.value) {
        if (ctx && ctx.refs[`t-${terminal.index}`][0]) {
            terminal.status = ctx.refs[`t-${terminal.index}`][0].isWsOpen() ? 'online' : 'closed';
            terminal.latency = ctx.refs[`t-${terminal.index}`][0].getLatency();
        }
    }
}

const changeFullScreen = () => {
    globalStore.isFullScreen = screenfull.isFullscreen;
};

defineExpose({
    acceptParams,
    cleanTimer,
});

onBeforeUnmount(() => {
    document.removeEventListener('fullscreenchange', changeFullScreen);
});

onMounted(() => {
    if (router.currentRoute.value.query.path) {
        const path = String(router.currentRoute.value.query.path);
        initCmd.value = `cd "${path}" \n`;
    }
    document.addEventListener('fullscreenchange', changeFullScreen);
});
</script>

<style lang="scss" scoped>
.terminal-tabs {
    :deep(.el-tabs__header) {
        padding: 0;
        position: relative;
        margin: 0 0 3px 0;
    }
    :deep(.el-tabs__nav) {
        white-space: nowrap;
        position: relative;
        transition: transform var(--el-transition-duration);
        float: left;
        z-index: calc(var(--el-index-normal) + 1);
    }
    :deep(.el-tabs__item) {
        padding: 0;
    }
    :deep(.el-tabs__item.is-active) {
        color: var(--panel-terminal-tag-active-text-color);
        background-color: var(--panel-terminal-tag-active-bg-color);
    }
    :deep(.el-tabs__item:hover) {
        color: var(--panel-terminal-tag-hover-text-color);
    }
    :deep(.el-tabs__item.is-active:hover) {
        color: var(--panel-terminal-tag-active-text-color);
    }
}

.tagButton {
    border: 0;
    background-color: var(--el-tabs__item);
}

.host-tree {
    :deep(.el-tree-node) {
        .el-tree-node__content {
            height: 36px;
            padding: 0 12px;

            &:hover {
                background-color: var(--el-fill-color-light);
            }
        }

        .el-tree-node__label {
            flex: 1;
            padding-left: 8px;
        }

        .el-tree-node__expand-icon {
            margin-right: 8px;
        }
    }

    :deep(.el-tree__empty-block) {
        padding: 24px 0;
        min-height: auto;
    }

    :deep(.el-tree__empty-text) {
        color: var(--el-text-color-secondary);
        font-size: 13px;
    }

    &.compact {
        :deep(.el-tree-node) {
            .el-tree-node__content {
                height: 28px;
                padding: 0 8px;
            }

            .el-tree-node__label {
                padding-left: 4px;
            }

            .el-tree-node__expand-icon {
                margin-right: 4px;
                font-size: 12px;
            }
        }

        :deep(.el-tree-node__children) {
            .el-tree-node__content {
                padding-left: 20px;
            }
        }
    }
}

.search-container {
    :deep(.el-input__wrapper) {
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

        &:hover {
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        }

        &.is-focus {
            box-shadow: 0 0 0 2px var(--el-color-primary-light-3);
        }
    }
}

.vertical-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
.el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child {
    padding-right: 0px;
}
.el-input__wrapper {
    border-radius: 50px;
}

:deep(.el-textarea__inner) {
    border-radius: 4px;
    resize: none;
    min-height: 32px;
    transition: height 0.2s ease;
}

.command-tabs {
    :deep(.el-tabs__header) {
        margin-bottom: 0;
        background-color: var(--el-bg-color);
    }
    :deep(.el-tabs__content) {
        height: 180px;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: var(--el-bg-color);
    }
    :deep(.el-tabs__item) {
        min-width: 80px;
        max-width: 110px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 0 8px;
    }
}
.group-tab-label {
    width: 90px;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}

.command-tag {
    cursor: pointer;
    height: auto;
    padding: 8px 12px;
    transition: all 0.3s;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid transparent;

    &:hover {
        border-color: var(--el-color-primary);
    }
}

.command-tag-name {
    font-weight: 500;
    font-size: 13px;
    flex: 1;
    text-align: left;
}

.command-preview-icon {
    font-size: 14px;
    opacity: 0.6;
    transition: opacity 0.3s;
    cursor: help;
    flex-shrink: 0;
    display: flex;
    align-items: center;

    &:hover {
        opacity: 1;
    }
}

.command-preview {
    .command-preview-name {
        font-size: 13px;
        margin-bottom: 6px;
        color: var(--el-text-color-primary);
        word-break: break-word;
    }

    .command-preview-value {
        font-size: 12px;
        font-family: monospace;
        padding: 8px;
        background-color: var(--el-fill-color-light);
        border-radius: 4px;
        color: var(--el-text-color-regular);
        word-break: break-all;
        white-space: pre-wrap;
    }
}

.command-tag-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}
</style>
